<template>
    <div>
        <el-carousel :interval="3000" arrow="always" style="height: 450px;margin-top: 30px;">
            <el-carousel-item style="height: 450px;">
                <img src="../../assets/images/index/1723389710834612.png" class="el-carousel-item-img" @click="$router.push('/cosmetic')">
            </el-carousel-item>
            <el-carousel-item style="height: 450px;">
                <img src="../../assets/images/index/17041995163017626.png" class="el-carousel-item-img" @click="$router.push('/skinCare')">
            </el-carousel-item>
        </el-carousel>
        <div class="recom-box">
            <div class="recom-item">
                <div class="recom-detail" v-if="indexList!==null">
                    <div>{{ indexList[0].goodsName }}</div>
                    <div>{{ indexList[0].goodsInfo }}</div>
                    <el-button  type="primary" plain @click="moreData(indexList[0].goodsId)">了解更多</el-button>
                </div>
                <div class="recom-image">
                    <img src="../../assets/images/index/1eaff9f591314479a7ad66d961c3d039_1000X1000.png" alt="">
                </div>
            </div>
            <div class="recom-item">
                <div class="recom-image">
                    <img src="../../assets/images/index/17109261570001326_1000X1000.png" alt="">
                </div>
                <div class="recom-detail" v-if="indexList!==null">
                    <div>{{ indexList[1].goodsName }}</div>
                    <div>{{ indexList[1].goodsInfo }}</div>
                    <el-button  type="primary" plain @click="moreData(indexList[1].goodsId)">了解更多</el-button>
                </div>
            </div>
            <div class="recom-item">
                <div class="recom-detail" v-if="indexList!==null">
                    <div>{{ indexList[2].goodsName }}</div>
                    <div>{{ indexList[2].goodsInfo }}</div>
                    <el-button  type="primary" plain @click="moreData(indexList[2].goodsId)">了解更多</el-button>
                </div>
                <div class="recom-image">
                    <img src="../../assets/images/index/f9993ae8e51a432d8a238ce943ee453d_1000X1000.png" alt="">
                </div>
            </div>
        </div>
        <div class="more-production-box">
            <h2 style="text-align: center;padding: 30px 0;">更多产品</h2>
            <div class="more-production-item">
                <div class="more-left">
                    <img src="../../assets/images/index/17041995163017626.png" @click="$router.push('/skinCare')">
                    <img src="../../assets/images/index/17041999953754560.png" @click="$router.push('/perfume')">
                    <img src="../../assets/images/index/17041998857571727.png" @click="$router.push('/cosmetic')">
                </div>
                <div class="more-right">
                    <img src="../../assets/images/index/17199795901958448_1000X1000.png" style="margin-bottom: 10%;">
                    <el-button plain size="max"  @click="$router.push('/cosmetic')">了解更多产品</el-button>
                </div>
            </div>
        </div>
        <div class="exclusive-service-box">
            <h2 style="text-align: center;padding: 30px 0;">官网专享服务</h2>
            <div class="exclusive-service-item">
                <div class="image-item" @click="$router.push('/newTaste')">
                    <img src="../../assets/images/index/16763724005703931.png" alt="">
                </div>
                <h3 @click="$router.push('/newTaste')">新品试用服务</h3>
                <div class="image-item" @click="$router.push('VIPcenter')">
                    <img src="../../assets/images/index/16763721532226420.png" alt="">
                </div>
                <h3 @click="$router.push('VIPcenter')">会员中心</h3>
            </div>
        </div>
    </div>
</template>

<script>
import { loadDataList } from '@/utils/api/goods';

export default {
    name:"index",
    data(){
        return {
            indexList:null
        }
    },
    created(){
        const that=this
        loadDataList().then(data=>{
            that.indexList=data
        })
    },
    methods:{
        // shiftMore(routename){
        //     this.$route.push
        // }
        moreData(goodsId){
            this.$router.push({
                path:"/detailGood",
                query:{
                    id:goodsId
                }
            })
        }
    }
}
</script>

<!-- <style lang="scss">
    .index-hd{
        .icon-box{
            display: flex;
        }
    }
</style> -->

<style>
.el-carousel-item-img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.recom-box{
    padding: 40px 0;
}
.recom-item{
    display: flex;
    justify-content: space-between;
    height: 400px;
}
.recom-detail{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.recom-detail div{
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recom-detail div:first-child{
    font-size: 30px;
    margin:5% auto;
    white-space: normal;
}
.recom-detail .el-button{
    margin: 10% auto;
    font-size: 20px;
    padding: 20px;
}
.recom-image{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.recom-image img{
    height: 90%;
    aspect-ratio: 1/1;
}
.more-production-box{
    background-color: #efefef;
}
.more-production-item{
    display: flex;
    padding: 0 7%;
}
.more-left{
    width: 50%;
}
.more-left img{
    width: 100%;
}
.more-right{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.more-right img{
    width: 70%;

}
.exclusive-service-item{
    display: grid;
    grid-template-columns:repeat(4,1fr);
    width: 90%;
    margin: 0 auto;
    padding-bottom: 10%;
}
.exclusive-service-item div{
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
}
.exclusive-service-item h3{
    display: flex;
    justify-content: center;
    align-items: center;
}
.exclusive-service-item img{
    height: 90%;
    width: 90%;
}
</style>